<template>
  <div class="bronchialAsthma-container">
    <div v-if="showType === 'table'" class="table">
      <page-header
        type="asthmaQuestionnaire"
        @add="add"
        @searchChange="searchData"
      />
      <div style="padding: 0px 50px; margin-top: -10px; margin-bottom: 12px">
        <el-alert
          v-if="pageData.title"
          :title="pageData.title"
          type="success"
          center
          show-icon
        ></el-alert>
      </div>
      <pagination-table
        ref="ptable"
        :tableData="pageData.listData"
        @pagination="paginaChange"
      >
        <XMTableColumn label="时间" prop="createTime">
          <template #default="scope">
            {{ initDate(scope.row.createTime) }}
          </template>
        </XMTableColumn>
        <XMTableColumn label="评估结果" prop="result"></XMTableColumn>
        <XMTableColumn label="评估年龄" prop="age"></XMTableColumn>
        <XMTableColumn label="操作" min-width="160">
          <template #default="scope">
            <el-button size="small" type="primary" @click="toDec(scope.row)">
              查看
            </el-button>
          </template>
        </XMTableColumn>
      </pagination-table>
    </div>
    <div v-else>
      <el-button type="text" icon="el-icon-arrow-left" @click="backTable">
        返回列表
      </el-button>
      <bronchialAsthma-Form
        v-if="showType === 'lessThan'"
        :showType="showType"
        :id="id"
        :pid="pid"
        @success="backTable"
      ></bronchialAsthma-Form>
      <bronchialAsthma-Form-SA
        v-if="showType === 'greaterEqual'"
        :showType="showType"
        :id="id"
        :pid="pid"
        @success="backTable"
      ></bronchialAsthma-Form-SA>
    </div>
  </div>
</template>

<script>
  import PageHeader from '@/components/PageHeader'
  import PaginationTable from '@/components/PaginationTable'
  import { reactive, onBeforeMount, ref, computed } from 'vue'
  import { queryPage } from '@/api/modules/reception.js'
  import moment from 'moment'
  import { useStore } from 'vuex'
  import bronchialAsthmaForm from './form/bronchialAsthmaForm.vue'
  import bronchialAsthmaFormSA from './form/bronchialAsthmaFormSA.vue'
  export default {
    name: 'patientList',
    components: {
      PageHeader,
      PaginationTable,
      bronchialAsthmaFormSA,
      bronchialAsthmaForm,
    },
    props: { pid: Number },
    setup(props) {
      const pageData = reactive({
        listData: {},
        search: { pageIndex: 1, pageSize: 5, orderType: 1 },
        title: null,
      })
      const loadData = async function (params) {
        params['patientId'] = props.pid
        params['screeningType'] = 2
        const res = await queryPage(params)
        pageData.listData = res
        pageData.title = res.message
      }

      // 事件处理
      const ptable = ref(null)
      const resetSeach = function () {
        console.log('resetSeach')
        pageData.search = { pageIndex: 1, pageSize: 5, orderType: 1 }
        loadData(pageData.search)
        ptable.value.clearData()
      }
      const searchData = function (params) {
        pageData.search.name = params.value1
        pageData.search.startDay = params.value2.start
          ? moment(params.value2.start).format('YYYY-MM-DD')
          : null
        pageData.search.endDay = params.value2.end
          ? moment(params.value2.end).format('YYYY-MM-DD')
          : null
        pageData.search.status = params.value3
        pageData.search.prNo = params.value4
        loadData(pageData.search)
      }
      const paginaChange = function (params) {
        pageData.search.pageIndex = params.current
        pageData.search.pageSize = params.pageSize
        pageData.search.orderType = params.orderType
        loadData(pageData.search)
      }

      const showType = ref('table')
      const store = useStore()
      const add = function () {
        id.value = null
        showType.value = store.getters.patientInfo.ageType
      }
      // 界面切换
      let id = ref(null)
      const toDec = function (row) {
        showType.value = row.childType
        id.value = row.id
        console.log('row =' + JSON.stringify(row))
      }
      const backTable = function () {
        showType.value = 'table'
        id.value = null
        loadData(pageData.search)
      }
      onBeforeMount(() => {
        loadData(pageData.search)
      })

      let initDate = computed(() => {
        return (str) => moment(str).format('YYYY-MM-DD HH:mm')
      })
      return {
        pageData,
        resetSeach,
        searchData,
        paginaChange,
        add,
        showType,
        toDec,
        backTable,
        id,
        initDate,
      }
    },
  }
</script>

<style lang="scss" scoped>
  .bronchialAsthma-container {
    background-color: white;
    .table {
      margin: 22px;
    }
  }
</style>
